import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, Form, Input, message } from 'antd';
import AuthButton from '@/components/Permission/AuthButton';

const UserManagement = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [form] = Form.useForm();

  // 模拟获取用户列表
  const fetchUsers = () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      const mockUsers = [
        { id: 1, username: 'admin', name: '管理员', email: 'admin@example.com', role: '管理员' },
        { id: 2, username: 'user1', name: '用户1', email: 'user1@example.com', role: '普通用户' },
      ];
      setUsers(mockUsers);
      setLoading(false);
    }, 500);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  const handleAdd = () => {
    setEditingUser(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (user) => {
    setEditingUser(user);
    form.setFieldsValue(user);
    setIsModalVisible(true);
  };

  const handleDelete = (userId) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个用户吗？',
      onOk: () => {
        // 模拟删除操作
        setUsers(users.filter(user => user.id !== userId));
        message.success('删除成功');
      }
    });
  };

  const handleModalOk = () => {
    form.validateFields().then(values => {
      if (editingUser) {
        // 模拟编辑操作
        setUsers(users.map(user => user.id === editingUser.id ? { ...values, id: editingUser.id } : user));
        message.success('编辑成功');
      } else {
        // 模拟新增操作
        const newUser = { ...values, id: users.length + 1 };
        setUsers([...users, newUser]);
        message.success('添加成功');
      }
      setIsModalVisible(false);
    });
  };

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <span>
          <AuthButton permission="user:edit">
            <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
          </AuthButton>
          <AuthButton permission="user:delete">
            <Button type="link" danger onClick={() => handleDelete(record.id)}>删除</Button>
          </AuthButton>
        </span>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <AuthButton permission="user:create">
          <Button type="primary" onClick={handleAdd}>新增用户</Button>
        </AuthButton>
      </div>
      
      <Table 
        columns={columns} 
        dataSource={users} 
        loading={loading} 
        rowKey="id" 
      />
      
      <Modal
        title={editingUser ? "编辑用户" : "新增用户"}
        open={isModalVisible}
        onOk={handleModalOk}
        onCancel={() => setIsModalVisible(false)}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item 
            name="username" 
            label="用户名" 
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            name="name" 
            label="姓名" 
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            name="email" 
            label="邮箱" 
            rules={[{ required: true, message: '请输入邮箱' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            name="role" 
            label="角色" 
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserManagement;
